<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{width: 100px;height:20px;background: red;position: absolute;left:0;top:0;}
    </style>
</head>
<body>
    <div id="box"></div>
</body>
<script>

    // 选择器
    var box = document.querySelector("#box");
    
    document.onkeydown = function(eve){
        var e = eve || window.event;
        var code = e.keyCode || e.which;

        switch(code){
            case 37:
                // 设置元素left 为 获取元素现有left - 步长 + 单位
                box.style.left = box.offsetLeft - 100 + "px";
                break;
            case 38:
                box.style.top = box.offsetTop - 100 + "px";
                break;
            case 39:
                box.style.left = box.offsetLeft + 100 + "px";
                break;
            case 40:
                box.style.top = box.offsetTop + 100 + "px";
                break;
        }

    }

</script>
</html>